<template>
  <div class="document-view">
    <div class="content">
      <div class="item" v-for="(item, index) in dataList" :key="index">
        <div>
          <el-form label-position="top" inline>
            <el-form-item :label="item.titleTop">
              <div fw-bold class="document-view-item">
                {{ blankAttributeDefault(item.infoTop) }}
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-form label-position="top" inline>
            <el-form-item :label="item.titleBottom">
              <div fw-bold class="document-view-item">
                {{ blankAttributeDefault(item.infoBottom) }}
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { blankAttributeDefault } from "@/utils/index";
console.log("012345578545");
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});
const dataList = ref([]);
watch(
  () => props.list,
  () => {
    if (!props.list || props.list.length == 0) {
      dataList.value = [
        {
          titleTop: "制单人",
          infoTop: "",
          titleBottom: "创建时间",
          infoBottom: "",
        },
        {
          titleTop: "修改人",
          infoTop: "",
          titleBottom: "修改时间",
          infoBottom: "",
        },
        {
          titleTop: "审核人",
          infoTop: "",
          titleBottom: "审核时间",
          infoBottom: "",
        },
      ];
    } else {
      dataList.value = props.list;
    }
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  .item {
    margin-right: 10px;
  }
}
.document-view-item {
  width: 240px;
  border-bottom: 1px #ddd solid;
}
</style>
